<template>
  <div>
    <el-dialog v-model="dialogFormVisible" :title="title" width="500" destroy-on-close :close-on-click-modal="closeOnClickModal">
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
          <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请输入密码" clearable />
        </el-form-item>
        <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="手机号" prop="phone" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="身份" prop="roleId" :label-width="formLabelWidth">
          <el-select
            v-model="roleId"
            placeholder="身份"
            clearable
            style="width: 192px"
          >
            <el-option
              v-for="item in roleDatas"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveOrUpdate">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import { saveOrUpdate, getUserInfo, getRoles } from '~/api/acl/user'
  import { ElMessageBox } from 'element-plus'
  import { showMessage } from '~/utils/my-notification'

  const emit = defineEmits(['refreshDataList'])

  const dialogFormVisible = ref(false)
  const formLabelWidth = '80px'
  const title = ref('新建用户')
  const closeOnClickModal = ref(false)
  const roleDatas = ref([])
  const roleId = ref('')

  const form = reactive({
    id: 0,
    username: '',
    name: '',
    password: '',
    phone: ''
  })
  const rules = {
    username: [
      { required: true, message: '用户名不能为空!', trigger: 'blur' },
      { min: 5, message: '请输入大于5位的字符', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空!', trigger: 'blur' },
        { min: 6, message: '长度大于6个字符!', trigger: 'blur' }
    ]
  }

  function init(id) {
    dialogFormVisible.value = true
    onAllRole()
    if(!id) {
      // 新建
      title.value = '新建用户'
      form.id = 0
      form.username = ''
      form.name = ''
      form.password = ''
      form.phone = ''
      roleId.value = ''
    } else {
      // 修改
      title.value = '修改用户'
      roleId.value = ''
      // 通过id查询用户信息
      queryUserInfo(id)
    }
  }
  function onAllRole() {
    getRoles().then(res => {
      if(res && res.data.code === 200) {
        roleDatas.value = res.data.data
      }
    })
  }
  // 通过id查询用户信息
  function queryUserInfo(id) {
    getUserInfo(id).then(res => {
      if(res && res.data.code === 200) {
        const data = res.data.data
        form.id = data.id
        form.username = data.username
        form.name = data.name
        form.password = data.password
        form.phone = data.phone
        roleId.value = data.roleId
      }
    })
  }
  // 将方法暴露给父组件
  defineExpose({
    init
  })

  const formRef = ref(null)
  // 确认
  function handleSaveOrUpdate() {
    formRef.value.validate((valid) => {
      if(!valid) {
        return false
      }
      ElMessageBox.confirm(`确定进行保存操作?`, '提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        form.roleId = roleId.value
        saveOrUpdate(form).then(res => {
          if(res && res.data.code === 200) {
            dialogFormVisible.value = false
            emit('refreshDataList')
          } else {
            showMessage(res.data.message, 'error')
          }
        })
      }).catch(err => {
        console.log(err)
      })
    })
  }
</script>

<style>
</style>
